*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.main-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header{
  display: flex;
  justify-content: center;
  background-color: #3a3b44;
  height: 75px;
  width: 100%;
  position: fixed;
  z-index: 999;
}
.header-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1000px;
}

.header-container img{
  width: 115px;
  height: 45px;
  margin-right: 55px;
}
.header-nav{
  display: flex;
  justify-content: space-between;
  width: 360px;
  list-style-type: none;
}
.header-leftnav{
  display: flex;
  align-items: center;
}

.header-login{
  display: flex;
  justify-content: space-around;
  width: 320px;

}
.head-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #58a673;
  width: 100px;
  border-radius: 2px;
  border:1px solid #58a673;
}
.head-btn:hover{
  color: #fff;
  background-color: #58a673;
}
.dl-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 70px;
  color: #fff;
  background-color: #58a673;
  border-radius: 2px;
}

.nav-home{
  color:  #58a673;
  font-size: 15px;
}
.nav-item{
  color: #fff;
  font-size: 15px;
}
.nav-item:hover{
  color: #58a673;
}
/*_______________头部结束___________________*/

.partner{
  display: flex;
  justify-content: center;
  padding-top: 75px;
  background:url(../imegas/gridbg.png);
}

.partner-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1000px;
  padding:55px 0;
}
.title-logo{
  display: flex;
  justify-content: center;
  width: 1000px;
  height: 200px;
}
.title-logo img{
  height: 110px;
}
.partner-container span{
  font-size: 18px;
  color: #b1b1b5;
  line-height: 20px;
  margin-bottom: 30px; 
}
.partner-title{
  font-weight: 400px;
  font-size: 32px;
  color: #fff;
  margin-bottom:35px;
}
.partner-summary{
  text-align: center;
  color:#58a673;
  line-height: 30px;
  font-size: 15px;
  margin-bottom: 45px;
}
.partner-end{
  text-align: center;
  width: 1000px;
  height: 41px;
  line-height: 60px;
  padding-bottom: 20px;
  background:url(../imegas/line1000.png) no-repeat;
  background-position: 50%;
}
.partner-end span{
  background-color: #3a3b44;
  padding: 0 15px;
  font-size: 17px;
}
.title-logo{
  display: flex;
  justify-content: space-around;
  width: 1000px;
  margin-top: 30px;
}
.title-logo-item{
  text-align: center;
  color: #b1b1b5;
  line-height: 30px;
  font-size: 18px;
}
.zhuanjia-btn{
  text-align: center;
  width: 240px;
  height: 52px;
  line-height: 50px;
  font-size: 22px;
  color: #58a673;
  border:1px solid #58a673;
}
.zhuanjia-btn:hover{
  color: #fff;
  background: #58a673;
}
/*______________________结束__________________*/
.work-container{
  display: flex;
  justify-content: center;
  background-color: #e1e6ec;
}

.work-list{
  display: flex;
  flex-direction: column;
  width: 1000px;
  padding: 70px 0;
}
.work-list span{
  font-size: 32px;
  color: #3f464b;
  line-height: 40px;
}
.work-title p{
  font-size: 18px;
  color: #999;
  margin-top: 20px;
  line-height: 20px;
  text-align: center;
}
.work-title{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 50px;
}


.tool-list{
  display: flex;
  justify-content: space-between;
}
.toppro-logo{
  height: 295px;
  width: 505px;
  background-color: #6aaf75;
  position: relative;
  margin-bottom: 5px;
}
.toppro-logo-container{
  display: inline-block;
  position: absolute;
  top: 50%;
  height: 60px;
  width: 100%;
  background:url(../imegas/1-1tp.png)no-repeat 50%;
  transform: translateY(-50%);
}
.title-item-toppro{
  position: absolute;
  top: 104px;
  left: 50%;
  height: 0;
  width: 350px;
  text-align: center;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  transition: all .2s ease;
  transform: translate(-50%, -50%);
}
.imegas-item{
  position: absolute;
  height: 60px;
  width: 60px;
  top: -27px;
  left: 223px;
}
.icon-logo{
  background:url(../imegas/2-1tp.png)no-repeat 50%;
  background-size:60px 60px; 
}
.toppro-logo:hover .icon-logo{
  width: 60px;
  height: 60px;
  transition: all .3s ease;
}
.toppro-logo:hover{
  background-color: #fff;
  transition: all .5s ease;
}
.toppro-logo:hover .title-item-toppro{
  height: 100%
}

.git-logo-container{
  height: 240px;
  width: 505px;
  background-color: #3b4858;
  position: relative;
}
.git-icon-logo1{
  background:url(../imegas/1-2git1.png);
  height: 80px;
  width: 80px;
  display: inline-block;
}
.git-icon-logo2{
  background:url(../imegas/1-2git2.png);
  height: 80px;
  width: 80px;
  display: inline-block;
}
.git-icon-logo3{
  background:url(../imegas/1-2git3.png);
  height: 80px;
  width: 80px;
  display: inline-block;
}
.git-imegas-item{
  position: absolute;
  width: 505px;
  left: 10px;
  top: 30%;
}
.title-item-git{
  position: absolute;
  left: 50%;
  top:75%;
  width:400px; 
  text-align: center;
  font-size: 14px;
  color: #333;
  height: 0px;
  overflow: hidden;
  transition: all .3s ease;
  transform: translate(-50%, -50%);
}
.git-logo-container:hover .title-item-git{
  height: 25%
}
.git-logo-container:hover{
  background-color: #fff;
  transition: all .5s ease;
}
.icon{
  margin: 0 40px;
}
.git-logo-container:hover .git-imegas-item{
  left: 80px;
}
.git-logo-container:hover .git-icon-logo1{
  background:url(../imegas/2-2git1.png)no-repeat 50%;
  margin: 0 20px;
}
.git-logo-container:hover .git-icon-logo2{
  background:url(../imegas/2-2git2.png)no-repeat 50%;
  margin: 0 20px;
}
.git-logo-container:hover .git-icon-logo3{
  background:url(../imegas/2-2git3.png)no-repeat 50%;
  margin: 0 20px;
}



.communicate{
  position: relative;
  width: 244px;
  
}
.dd-main{
  position: relative;
  background-color: #008df1;
  width: 244px;
  height: 180px;
}
.dd-container{
  position: absolute;
  background:url(../imegas/1-3dd.png)no-repeat 50%;
  top: 50%;
  height: 80px;
  width: 100%;
  transform: translateY(-50%);

}
.dd-item{
  position: absolute;
  height: 60px;
  width: 60px;
  left: 50%;
  text-align: center;
}
.dd-icon{
  background:url(../imegas/2-3dd.png)no-repeat 50%;
  background-size:60px 60px; 
  transform: translate(-50%, -50%);
}
.dd-title{
  position: absolute;
  top: 100%;
  left: 50%;
  text-align: center;
  font-size: 14px;
  color: #333;
  width: 244px;
  height: 0px;
  overflow: hidden;
  transition: all .4s ease;
  transform: translate(-50%, -50%);
}
.dd-main:hover {
  background-color: #fff;
  transition: all .5s ease;
}
.dd-main:hover .dd-title{
  height: 40px;
}
.dd-main:hover .dd-icon{
  height: 60px;
}



.wachat-container{
  position: relative;
  background-color: #6ece46;
  width: 244px;
  height: 180px;
}
.wachat-list{
  position: absolute;
  background:url(../imegas/1-4wx.png)no-repeat 50%;
  top: 50%;
  height: 80px;
  width: 100%;
  transform: translateY(-50%);

}
.wachat-item{
  position: absolute;
  height: 60px;
  width: 60px;
  left: 50%;
  text-align: center;
}
.wachat-icon{
  background:url(../imegas/2-4wx.png)no-repeat 50%;
  background-size:60px 60px; 
  transform: translate(-50%, -50%);
}
.wachat-title{
  position: absolute;
  top: 100%;
  left: 50%;
  text-align: center;
  font-size: 14px;
  color: #333;
  width: 244px;
  height: 0px;
  overflow: hidden;
  transition: all .4s ease;
  transform: translate(-50%, -50%);
}
.wachat-container:hover {
  background-color: #fff;
  transition: all .5s ease;
}
.wachat-container:hover .wachat-title{
  height: 40px;
}
.wachat-container:hover .wachat-icon{
  height: 60px;
}


.slack-container{
  position: relative;
  background-color: #f77636;
  width: 244px;
  height: 180px;
}
.slack-list{
  position: absolute;
  background:url(../imegas/1-5slack.png)no-repeat 50%;
  top: 50%;
  height: 80px;
  width: 100%;
  transform: translateY(-50%);

}
.slack-item{
  position: absolute;
  height: 60px;
  width: 60px;
  left: 50%;
  text-align: center;
}
.slack-icon{
  background:url(../imegas/2-5slack.png)no-repeat 50%;
  background-size:60px 60px; 
  transform: translate(-50%, -50%);
}
.slack-title{
  position: absolute;
  top: 100%;
  left: 50%;
  text-align: center;
  font-size: 14px;
  color: #333;
  width: 244px;
  height: 0px;
  overflow: hidden;
  transition: all .1s ease;
  transform: translate(-50%, -50%);
}
.slack-container:hover {
  background-color: #fff;
  transition: all .5s ease;
}
.slack-container:hover .slack-title{
  height: 40px;
}
.slack-container:hover .slack-icon{
  height: 60px;
}



.document{
  position: relative;
  width: 240px;
}
.shimo-main{
  position: relative;
  height: 175px;
  width: 240px;
  background-color: #2a2c3d;
  margin-bottom: 5px;
}
.shimo-container{
  position: absolute;
  background:url(../imegas/1-6shimo.png)no-repeat 50%;
  top: 50%;
  height: 80px;
  width: 100%;
  transform: translateY(-50%);
}
.shimo-item{
  position: absolute;
  height: 60px;
  width: 114px;
  left: 50%;
  text-align: center;
}
.shimo-icon{
  background:url(../imegas/2-6shimo.png)no-repeat 50%;
  background-size:114px 60px; 
  transform: translate(-50%, -50%);
}
.shimo-title{
  position: absolute;
  top: 100%;
  left: 50%;
  text-align: center;
  font-size: 14px;
  color: #333;
  width: 244px;
  height: 0px;
  overflow: hidden;
  transition: all .3s ease;
  transform: translate(-50%, -50%);
}
.shimo-main:hover {
  background-color: #fff;
  transition: all .5s ease;
}
.shimo-main:hover .shimo-title{
  height: 40px;
}
.shimo-main:hover .shimo-icon{
  height: 60px;
}

.dropbox-main{
  position: relative;
  height: 360px;
  width: 240px;
  background-color: #007be9;
}
.dropbox-container{
  position: absolute;
  background:url(../imegas/1-7dropbox.png)no-repeat 50%;
  top: 50%;
  height: 80px;
  width: 100%;
  transform: translateY(-50%);
}
.dropbox-item{
  position: absolute;
  height: 60px;
  width: 60px;
  left: 50%;
  text-align: center;
}
.dropbox-icon{
  background:url(../imegas/2-7dropbox.png)no-repeat 50%;
  background-size:60px 60px; 
  transform: translate(-50%, -50%);
}
.dropbox-title{
  position: absolute;
  top: 100%;
  left: 50%;
  text-align: center;
  font-size: 14px;
  color: #333;
  width: 244px;
  height: 0px;
  overflow: hidden;
  transition: all .1s ease;
  transform: translate(-50%, -50%);
}
.dropbox-main:hover {
  background-color: #fff;
  transition: all .5s ease;
}
.dropbox-main:hover .dropbox-title{
  height: 40px;
}
.dropbox-main:hover .dropbox-icon{
  height: 60px;
}
/*.stir-diamonds{
  display: flex;
  justify-content: space-between;
}
.tool-container{
  background:#6aaf75;
  width: 505px;
  height: 295px;
  top: 0;
  left: 0;
}
.icon-logo{
  background:url(../imegas/1-1tp.png)no-repeat 50%;
  background-size: 60px 60px;
}*/

/*.tool-item-content{
  display: inline-block;
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%); 
  transform: translateY(-50%);
  text-align: center;
  font-size: 0;
}*/

/*.icon-logo{
  background:url(../imegas/1-1tp.png)no-repeat 50%;
  background-size: 60px 60px;
}

.tool-container:hover{
  background-color: #fff;
  transition: all .3s ease;
}


.git-logo{
  background-color: #3b4858;
  width:505px;
  height: 240px;
  text-align: center;
  line-height: 240px;
  border-radius: 7px;
}
.git-logo img{
  margin-top: 75px;
}
.dd-logo{
  background-color: #008df1;
  height: 180px;
  width: 244px;
  text-align: center;
  line-height: 244px;
  border-radius: 7px 7px 0 0;
}
.wachat-logo{
  background-color: #6ece46;
  height: 180px;
  width: 244px;
  text-align: center;
  line-height: 244px;
}
.slack-logo{
  background-color: #f77636;
  height:180px;
  width: 244px;
  text-align: center;
  line-height: 244px;
  border-radius: 0 0 7px 7px;
}
.shimo-logo{
  background-color: #2a2c3d;
  height:175px;
  width: 240px;
  text-align: center;
  line-height: 175px;
  border-radius: 7px;
  margin-bottom: 5px;
}
.shimo-logo img{
  margin-top: 60px;
}
.dropbox-logo{
  background-color: #007be9;
  height:360px;
  width: 240px;
  text-align: center;
  line-height: 360px;
  border-radius: 7px;
}
.dropbox-logo img{
  margin-top: 140px;
}*/
/*___________________结束________________*/

.service-process{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.process-container{
  display: flex;
    flex-direction: column;
    align-items: center;
    padding:50px 0;
}
.process-content{
  width: 450px;
  padding: 0 80px 0 30px;
}
.process-content span{
  font-size: 28px;
  color: #404c5f;
  line-height: 65px;
}
.process-content p{
  font-size: 16px;
  color: #3f464b;
  line-height: 30px;
}
.process-main{
  display: flex;
  margin-bottom: 20px;
}
.process-title{
  text-align: center;
  margin-bottom: 40px;
}
.process-title span{
  font-size: 32px;
  color: #3f464b;
  line-height: 80px;
}
.process-title p{
  font-size: 16px;
  color: #999;
}
.procedure{
  width: 310px;
  height: 200px;
}
.lefticon{
  text-align: center;
}
.numbar{
  font-size: 32px;
  height: 64px;
  width: 64px;
  border-radius: 50%;
  color: #fff;
  background-color: #62bd82;
  text-align: center;
  line-height: 64px;
  box-shadow: #deede3 0px 7px;
}
/*_____________结束___________*/
.scene-container{
  display: flex;
  justify-content: center;
  padding:70px 0;
  background-image: linear-gradient(#35374b,#767882);
}
.scene-list{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 1000px;
}
.secne-main-content li{
  display: inline-block;
  width: 310px;
  text-align: center;
  line-height: 30px;
  margin-bottom: 30px;
  margin-right: 20px;
  padding-bottom: 10px;
  color: #000;
  background-color: #fff;
  border-radius: 5px;
}
.secne-main-content li img{
  height: 250px;
  width: 310px;
  border-radius:5px 5px 0 0;
}
.secne-title{
  text-align: center;
  margin-bottom: 70px;
}
.secne-title span{
  font-size: 32px;
  color: #fff;
  line-height: 40px;
}
.secne-title p{
  font-size: 18px;
  color: #b1b1b5;
  line-height: 20px;
  margin-top: 20px;
}
/*___________________结束____________________*/
.association-container{
  display: flex;
  justify-content: center;
  padding: 70px 0;
  background-color: #f6f8fa;
}
.association-title{
  text-align: center;
  margin-bottom: 50px;
}
.association-title span{
  font-size: 32px;
  color: #3f464b;
  line-height: 40px;
}
.association-title p{
  font-size: 18px;
  color: #b1b1b5;
  line-height: 20px;
  margin-top: 20px;
}
.association-list img{
  height: 540px;
  width: 1000px;
}
/*——————————————————————结束————————————————————*/
.enter-container{
  display: flex;
  justify-content: center;
}
.enter-main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px 0;
}
.enter-title{
  text-align: center;
  margin-bottom: 50px;
}
.enter-title span{
  font-size: 32px;
  color: #3f464b;
  line-height: 40px;
}
.enter-title p{
  font-size: 18px;
  color: #b1b1b5;
  line-height: 20px;
  margin-top: 20px;
}
.enter-list{
  display: flex;
  justify-content: space-between;
  width: 1000px;
}
.enter-list img{
  height: 160px;
}
.enter-list span{
  font-size: 18px;
  line-height: 25px;
  height: 25px;
  color: #3f464b;
}
.enter-list p{
  font-size: 16px;
  color: #999;
}
.enter-item{
  width: 160px;
  text-align: center;
  line-height: 30px;
  position: relative;
}
.enter-item-teshu{
  width: 160px;
  text-align: center;
  line-height: 30px;
  position: relative;
}
.enter-item:after{
  content: "";
  background:url(../imegas/arrow_right.png)no-repeat 70px/89px 24.5px;
  height: 100px;
  width: 160px;
  top: 38px;
  left: 105px;
  position: absolute;
}
/*__________________结束__________________*/
.page-footer{
  display: flex;
  justify-content: center;
  background-color:#1d1a33;
}
.footer-container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1000px;
  padding-top: 60px;
}
.footer-top{
  display: flex;
}
.about{
  width: 230px;
  margin-right: 80px;
}
.title-tongyi{
  display: inline-block;
  font-size: 15px;
  color: #fff;
  height: 50px;
  line-height: 20px;
}
.title-tongyi:after{
  content: "";
  display: block;
  margin-top: 10px;
  margin-left: 2px;
  width:19px;
  height: 3px;
  background-color: #292644;
}
.subnav{
  list-style-type: none;
}
.intro{
  font-size: 14px;
  color: #8a8b91;
  line-height: 28px;
}
.navbottom{
  width: 160px;
}
.contact-us{
  width: 230px;
}
.logo-bottom{
  width: 115px;
  height: 45px;
  margin-right: 170px;
}
.footer-bottom{
  text-align: center;
  margin-top: 10px;
  color: #fff;
  height: 32px;
  line-height: 32px;
  width: 1000px;
  font-size: 12px;
  border-top: 1px solid #8a8b9136;
}
.footer-bottom img{
  height: 17px;
  width: 17px;
}